import React, { Component } from 'react'
import { inject, observer } from 'mobx-react';

@inject('appStore')
@observer
class ModuleName extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount(){

  }

  fun = () => {

  }

  render() {
    const { imgBaseUrl, userData } = this.props.appStore;
    return (
      <header id="navbar" className="">
      <div id="navbar-container" className="boxed">
        <div className="navbar-header">
          <a href="index.html" className="navbar-brand">
            <img src="/resources/admin/img/logo.png" alt="Nifty Logo" className="brand-icon" />
            <div className="brand-title">
              <span className="brand-text">Nifty</span>
            </div>
          </a>
        </div>
        <div className="navbar-content clearfix">
          <ul className="nav navbar-top-links pull-left">
            <li className="tgl-menu-btn">
              <a className="mainnav-toggle" href="#">
                <i className="fa fa-navicon fa-lg"></i>
              </a>
            </li>
            <li className="dropdown">
              <a href="#" data-toggle="dropdown" className="dropdown-toggle">
                <i className="fa fa-envelope fa-lg"></i>
                <span className="badge badge-header badge-warning">9</span>
              </a>
              <div className="dropdown-menu dropdown-menu-md with-arrow">
                <div className="pad-all bord-btm">
                  <p className="text-lg text-muted text-thin mar-no">You have 3 messages.</p>
                </div>
                <div className="nano scrollable" style={{height: 0}}>
                  <div className="nano-content" tabIndex="0">
                    <ul className="head-list">

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <img src="/resources/admin/img/av2.png" alt="Profile Picture" className="img-circle img-sm" />
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Andy sent you a message</div>
                            <small className="text-muted">15 minutes ago</small>
                          </div>
                        </a>
                      </li>
                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <img src="/resources/admin/img/av4.png" alt="Profile Picture" className="img-circle img-sm" />
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Lucy sent you a message</div>
                            <small className="text-muted">30 minutes ago</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <img src="/resources/admin/img/av3.png" alt="Profile Picture" className="img-circle img-sm" />
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Jackson sent you a message</div>
                            <small className="text-muted">40 minutes ago</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <img src="/resources/admin/img/av6.png" alt="Profile Picture" className="img-circle img-sm" />
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Donna sent you a message</div>
                            <small className="text-muted">5 hours ago</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <img src="/resources/admin/img/av4.png" alt="Profile Picture" className="img-circle img-sm" />
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Lucy sent you a message</div>
                            <small className="text-muted">Yesterday</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <img src="/resources/admin/img/av3.png" alt="Profile Picture" className="img-circle img-sm" />
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Jackson sent you a message</div>
                            <small className="text-muted">Yesterday</small>
                          </div>
                        </a>
                      </li>
                    </ul>
                  </div>
                <div className="nano-pane" style={{display: 'none'}}><div className="nano-slider" style={{transform: 'translate(0px, 0px)'}}></div></div></div>

                <div className="pad-all bord-top">
                  <a href="#" className="btn-link text-dark box-block">
                    <i className="fa fa-angle-right fa-lg pull-right"></i>Show All Messages
                  </a>
                </div>
              </div>
            </li>

            <li className="dropdown">
              <a href="#" data-toggle="dropdown" className="dropdown-toggle">
                <i className="fa fa-bell fa-lg"></i>
                <span className="badge badge-header badge-danger">5</span>
              </a>

              <div className="dropdown-menu dropdown-menu-md with-arrow">
                <div className="pad-all bord-btm">
                  <p className="text-lg text-muted text-thin mar-no">You have 3 messages.</p>
                </div>
                <div className="nano scrollable" style={{height: 0}}>
                  <div className="nano-content" tabIndex="0">
                    <ul className="head-list">

                      <li>
                        <a href="#">
                          <div className="clearfix">
                            <p className="pull-left">Database Repair</p>
                            <p className="pull-right">70%</p>
                          </div>
                          <div className="progress progress-sm">
                            <div style={{width: '70%'}} className="progress-bar">
                              <span className="sr-only">70% Complete</span>
                            </div>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#">
                          <div className="clearfix">
                            <p className="pull-left">Upgrade Progress</p>
                            <p className="pull-right">10%</p>
                          </div>
                          <div className="progress progress-sm">
                            <div style={{width: '10%'}} className="progress-bar progress-bar-warning">
                              <span className="sr-only">10% Complete</span>
                            </div>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <span className="icon-wrap icon-circle bg-primary">
                              <i className="fa fa-comment fa-lg"></i>
                            </span>
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">New comments waiting approval</div>
                            <small className="text-muted">15 minutes ago</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                      <span className="badge badge-success pull-right">90%</span>
                          <div className="media-left">
                            <span className="icon-wrap icon-circle bg-danger">
                              <i className="fa fa-hdd-o fa-lg"></i>
                            </span>
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">HDD is full</div>
                            <small className="text-muted">50 minutes ago</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <span className="icon-wrap bg-info">
                              <i className="fa fa-file-word-o fa-lg"></i>
                            </span>
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Write a news article</div>
                            <small className="text-muted">Last Update 8 hours ago</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                      <span className="label label-danger pull-right">New</span>
                          <div className="media-left">
                            <span className="icon-wrap bg-purple">
                              <i className="fa fa-comment fa-lg"></i>
                            </span>
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">Comment Sorting</div>
                            <small className="text-muted">Last Update 8 hours ago</small>
                          </div>
                        </a>
                      </li>

                      <li>
                        <a href="#" className="media">
                          <div className="media-left">
                            <span className="icon-wrap bg-success">
                              <i className="fa fa-user fa-lg"></i>
                            </span>
                          </div>
                          <div className="media-body">
                            <div className="text-nowrap">New User Registered</div>
                            <small className="text-muted">4 minutes ago</small>
                          </div>
                        </a>
                      </li>
                    </ul>
                  </div>
                <div className="nano-pane" style={{display: 'none'}}><div className="nano-slider" style={{transform: 'translate(0px, 0px)'}}></div></div></div>
                <div className="pad-all bord-top">
                  <a href="#" className="btn-link text-dark box-block">
                    <i className="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications
                  </a>
                </div>
              </div>
            </li>
            <li className="mega-dropdown">
              <a href="#" className="mega-dropdown-toggle">
                <i className="fa fa-th-large fa-lg"></i>
              </a>
              <div className="dropdown-menu mega-dropdown-menu">
                <div className="clearfix">
                  <div className="col-sm-12 col-md-3">
                    <div className="text-center bg-purple pad-all">
                      <h3 className="text-thin mar-no">Weekend shopping</h3>
                      <div className="pad-ver box-inline">
                        <span className="icon-wrap icon-wrap-lg icon-circle bg-trans-light">
                          <i className="fa fa-shopping-cart fa-4x"></i>
                        </span>
                      </div>
                      <p className="pad-btm">
                        Members get <span className="text-lg text-bold">50%</span> more points. Lorem ipsum dolor sit amet!
                      </p>
                      <a href="#" className="btn btn-purple">Learn More...</a>
                    </div>

                  </div>
                  <div className="col-sm-4 col-md-3">
                    <ul className="list-unstyled">
                      <li className="dropdown-header">Pages</li>
                      <li><a href="#">Profile</a></li>
                      <li><a href="#">Search Result</a></li>
                      <li><a href="#">FAQ</a></li>
                      <li><a href="#">Sreen Lock</a></li>
                      <li><a href="#" className="disabled">Disabled</a></li>
                      <li className="divider"></li>
                      <li className="dropdown-header">Icons</li>
                      <li><a href="#"><span className="pull-right badge badge-purple">479</span> Font Awesome</a></li>
                      <li><a href="#">Skycons</a></li>
                    </ul>

                  </div>
                  <div className="col-sm-4 col-md-3">
                    <ul className="list-unstyled">
                      <li className="dropdown-header">Mailbox</li>
                      <li><a href="#"><span className="pull-right label label-danger">Hot</span>Indox</a></li>
                      <li><a href="#">Read Message</a></li>
                      <li><a href="#">Compose</a></li>
                      <li className="divider"></li>
                      <li className="dropdown-header">Featured</li>
                      <li><a href="#">Smart navigation</a></li>
                      <li><a href="#"><span className="pull-right badge badge-success">6</span>Exclusive plugins</a></li>
                      <li><a href="#">Lot of themes</a></li>
                      <li><a href="#">Transition effects</a></li>
                    </ul>

                  </div>
                  <div className="col-sm-4 col-md-3">
                    <ul className="list-unstyled">
                      <li className="dropdown-header">Components</li>
                      <li><a href="#">Tables</a></li>
                      <li><a href="#">Charts</a></li>
                      <li><a href="#">Forms</a></li>
                      <li className="divider"></li>
                      <li>
                        <form role="form" className="form">
                          <div className="form-group">
                            <label className="dropdown-header">Newsletter</label>
                            <input id="demo-megamenu-input" type="email" placeholder="Enter email" className="form-control" />
                          </div>
                          <button className="btn btn-primary btn-block" type="submit">Submit</button>
                        </form>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </li>

          </ul>
          <ul className="nav navbar-top-links pull-right">

            <li className="dropdown">
              <a id="demo-lang-switch" className="lang-selector dropdown-toggle" href="#" data-toggle="dropdown">
                <span className="lang-selected">
                  <img className="lang-flag" src="/resources/admin/img/flags/united-kingdom.png" alt="English" />
                  <span className="lang-id">EN</span>
                  <span className="lang-name">English</span>
                </span>
              </a>

              <ul className="head-list dropdown-menu with-arrow">
                <li>
                  <a href="#" className="active">
                    <img className="lang-flag" src="/resources/admin/img/flags/united-kingdom.png" alt="English" />
                    <span className="lang-id">EN</span>
                    <span className="lang-name">English</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img className="lang-flag" src="/resources/admin/img/flags/france.png" alt="France" />
                    <span className="lang-id">FR</span>
                    <span className="lang-name">Français</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img className="lang-flag" src="/resources/admin/img/flags/germany.png" alt="Germany" />
                    <span className="lang-id">DE</span>
                    <span className="lang-name">Deutsch</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img className="lang-flag" src="/resources/admin/img/flags/italy.png" alt="Italy" />
                    <span className="lang-id">IT</span>
                    <span className="lang-name">Italiano</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img className="lang-flag" src="/resources/admin/img/flags/spain.png" alt="Spain" />
                    <span className="lang-id">ES</span>
                    <span className="lang-name">Español</span>
                  </a>
                </li>
              </ul>
            </li>

            <li id="dropdown-user" className="dropdown">
              <a href="#" data-toggle="dropdown" className="dropdown-toggle text-right">
                <span className="pull-right">
                  <img className="img-circle img-user media-object" src={`${imgBaseUrl}${userData.img}`} alt="Profile Picture" />
                </span>
                <div className="username hidden-xs">{userData.account}</div>
              </a>


              <div className="dropdown-menu dropdown-menu-md dropdown-menu-right with-arrow panel-default">

                <div className="pad-all bord-btm">
                  <p className="text-lg text-muted text-thin mar-btm">750Gb of 1,000Gb Used</p>
                  <div className="progress progress-sm">
                    <div className="progress-bar" style={{width: '70%'}}>
                      <span className="sr-only">70%</span>
                    </div>
                  </div>
                </div>
                <ul className="head-list">
                  <li>
                    <a href="#">
                      <i className="fa fa-user fa-fw fa-lg"></i> Profile
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span className="badge badge-danger pull-right">9</span>
                      <i className="fa fa-envelope fa-fw fa-lg"></i> Messages
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <span className="label label-success pull-right">New</span>
                      <i className="fa fa-gear fa-fw fa-lg"></i> Settings
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i className="fa fa-question-circle fa-fw fa-lg"></i> Help
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i className="fa fa-lock fa-fw fa-lg"></i> Lock screen
                    </a>
                  </li>
                </ul>
                <div className="pad-all text-right">
                  <a href="pages-login.html" className="btn btn-primary">
                    <i className="fa fa-sign-out fa-fw"></i> Logout
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </header>
    )
  }
}

module.exports = ModuleName
